<!-- 模板 -->
<template>
  <div class="cate-root">
    <!-- 1、导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/login' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 2、添加分类按钮 -->
      <el-row>
        <el-col>
          <el-button type="primary">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 3、树状表格 -->
      <tree-table
        class="tree-table"
        ref="table"
        index-text="序号"
        :data="cateList"
        :columns="columns"
        :stripe="props.stripe"
        :border="props.border"
        :show-header="props.showHeader"
        :show-summary="props.showSummary"
        :show-row-hover="props.showRowHover"
        :show-index="props.showIndex"
        :tree-type="props.treeType"
        :is-fold="props.isFold"
        :expand-type="props.expandType"
        :selection-type="props.selectionType"
      >
        <!-- 是否有效的模板 -->
        <template slot="isOk" slot-scope="scope">
          <div class="isOk">
            <!-- cat_deleted=false 表示没有删除，表示有效 -->
            <span v-if="!scope.row.cat_deleted" class="el-icon-success"></span>
            <span v-else class="el-icon-error"></span>
          </div>
        </template>
        <!-- 是否有效的模板 -->
        <template slot="level" slot-scope="scope">
          <div class="level">
            <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag v-else-if="scope.row.cat_level === 1" type="success">二级</el-tag>
            <el-tag v-else type="warning">三级</el-tag>
          </div>
        </template>
        <!-- 操作的模板 -->
        <template slot="operate">
          <div class="operate">
            <el-button type="primary" size="small" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </div>
        </template>
      </tree-table>
      <!-- 4、分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pagenum"
        :page-sizes="[1, 5, 10, 15, 20, 50]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request.js'
export default {
  name: '',
  data() {
    return {
      props: {
        stripe: false,
        border: true,
        showHeader: true,
        //显示合计
        showSummary: false,
        //是否有hover效果
        showRowHover: true,
        //是否显示序号
        showIndex: true,
        //是否为树状结构
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false
      },
      //分类列表
      cateList: [],
      //分页数据
      pageInfo: {
        pagenum: 1,
        pagesize: 5,
        total: 0
      },
      columns: [
        //第1列
        {
          label: '分类名称',
          prop: 'cat_name',
          width: '100px'
        },
        //第2列
        {
          label: '是否有效',
          prop: 'cat_deleted',
          width: '100px',
          type: 'template',
          template: 'isOk'
        },
        //第3列
        {
          label: '分类级别',
          prop: 'cat_level',
          width: '100px',
          type: 'template',
          template: 'level'
        },
        //第4列
        {
          label: '操作',
          type: 'template',
          template: 'operate',
          width: '100px'
        }
      ]
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageInfo.pagesize = size
      this.getCateList()
    },
    handleCurrentChange(num) {
      this.pageInfo.pagenum = num
      this.getCateList()
    },
    async getCateList() {
      let options = {
        url: 'categories',
        type: 'get',
        data: this.pageInfo
      }
      let { data: res } = await request(options)
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.cateList = res.data.result
      this.pageInfo.total = res.data.total
    }
  },
  created() {
    this.getCateList()
  }
}
</script>

<style lang="less" scoped>
.el-icon-success {
  font-size: 24px;
  color: #63a35c;
}

.tree-table {
  margin: 0.2rem 0;
}
.isOk,
.level,
.operate {
  text-align: center;
}
</style>
